<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>PaperScroller</h1>

<p>Paper scroller is a plugin that wraps the paper root element and implements scrolling, 
panning and centering of the paper.</p>

<h2>Install</h2>

<p>Add <code>joint.ui.paperScroller.js</code> and <code>joint.ui.paperScroller.css</code> files to your HTML:</p>

<pre><code>
&lt;link rel="stylesheet" type="text/css" href="joint.ui.paperScroller.css" /&gt;
&lt;script type="text/javascript" src="joint.ui.paperScroller.js"&gt;&lt;/script&gt;
</code></pre>

<h2>Usage</h2>

<p>Paper scroller is an element that serves as a window to the whole paper. This way, the actual paper
can be large but the user will see only the paper scroller area which he can scroll &amp; pan. First, we create
a paper scroller object. Then we pass the automatically create paper scroller element as a container
for our paper. Once we have our paper object created, we pass it back to the paper scroller as it needs
a reference to the actual paper.</p>

<pre><code>
var paperScroller = new joint.ui.PaperScroller;

var paper = new joint.dia.Paper({

    el: paperScroller.el,
    width: 2000,
    height: 2000,
    gridSize: 20,
    model: graph
});

paperScroller.options.paper = paper;
</code></pre>

<p>The next step is to hook the <code>startPanning</code> method of the paper scroller 
on the <code>blank:pointerdown</code> paper event which will cause panning whenever the user drags a blank
area of the paper:</p>

<pre><code>
paper.on('blank:pointerdown', paperScroller.startPanning);
</code></pre>


<h2>Centering the paper scroller</h2>

<p>If desired, the paper scroller can be centered so that the window through which the user sees the actual paper is in the middle of the,
possibly large, paper area. This can be achieved by calling the <code>center()</code> method of the paper scroller:</p>

<pre><code>
paperScroller.center();
</code></pre>

Method <code>center()</code> can be also called with parameters, which make the window center to the point (x,y) on the paper area.

<pre><code>
paperScroller.center(x,y);
</code></pre>

To center the window to the middle of the content (i.e. viewport) use a wrapper method called <code>centerContent()</code>.
<pre><code>
paperScroller.centerContent();
</code></pre>

<h2>Paper auto-resize/shrink</h2>

<p>The paper scroller constructor takes an optional parameter <code>autoResizePaper</code>. When 
this parameter is set to <code>true</code>, the paper scroller automatically resizes the paper
so that it fits the content inside it. This makes it possible to have a fixed (even smaller) size of
the paper and when the user e.g. drags an element outside this area, the paper scroller extends this paper
in order for the new element to fit into the paper. [Tip: Go to the KitchenSink application, place an element to the paper,
zoom the paper out so that you see its borders and move your element outside the paper area. You
should see how the paper gets automatically resized. When you drag the element back to its original
location, the paper scroller resizes the paper back to its original size.]</p>

<pre><code>
var paperScroller = new joint.ui.PaperScroller({ autoResizePaper: true });
</code></pre>
